<template>
  <div>
    <div class="header">
      <span @click="fun()">&lt;</span>
      <span @click="fun()">x</span>
      <span>商品详情</span>
    </div>
    <div class="banner">
      <img src="img/zhangimg/xiangqing/1.gif" alt="" />
    </div>
    <main>
      <div class="neirong">
        <b>400积分</b>
        <p>支付方式<span>全积分</span></p>
      </div>
      <h1>权益超市黄金会员（月卡）</h1>
      <div class="yue">
        <span>月销</span>
        &nbsp;&nbsp;&nbsp;&nbsp;
        <b>477件</b>
      </div>
      <div class="pin">
        <span>品牌</span>
        &nbsp;&nbsp;&nbsp;&nbsp;
        <b>中国移动</b>
      </div>
      <div class="tishi">重要提示：无</div>
      <div class="huan">
        <p>短信兑换</p>
        <p>
          评价&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span
            >62条&nbsp;好评度：100%</span
          >
        </p>
      </div>
      <h1>同类推荐</h1>
      <div class="dongtu">
        <dl>
          <img src="img/zhangimg/xiangqing/2.gif" alt="" />
          <dd>和彩云会员</dd>
          <dt>800积分</dt>
        </dl>
        <dl>
          <img src="img/zhangimg/xiangqing/3.gif" alt="" />
          <dd>视频彩铃会员</dd>
          <dt>480积分</dt>
        </dl>
        <dl>
          <img src="img/zhangimg/xiangqing/4.gif" alt="" />
          <dd>咪咕快游会员</dd>
          <dt>792积分</dt>
        </dl>
        <dl>
          <img src="img/zhangimg/xiangqing/5.gif" alt="" />
          <dd>1G流量日包</dd>
          <dt>300积分</dt>
        </dl>
        <dl>
          <img src="img/zhangimg/xiangqing/6.gif" alt="" />
          <dd>和平精英</dd>
          <dt>130积分</dt>
        </dl>
        <dl>
          <img src="img/zhangimg/xiangqing/7.gif" alt="" />
          <dd>开心朵朵</dd>
          <dt>700积分</dt>
        </dl>
        <dl>
          <img src="img/zhangimg/xiangqing/8.gif" alt="" />
          <dd>网易游戏印章</dd>
          <dt>690积分</dt>
        </dl>
        <dl>
          <img src="img/zhangimg/xiangqing/9.gif" alt="" />
          <dd>开心朵朵</dd>
          <dt>580积分</dt>
        </dl>
        <dl>
          <img src="img/zhangimg/xiangqing/10.gif" alt="" />
          <dd>开心朵朵</dd>
          <dt>700积分</dt>
        </dl>
        <dl>
          <img src="img/zhangimg/xiangqing/11.gif" alt="" />
          <dd>得力</dd>
          <dt>660积分</dt>
        </dl>
        <dl>
          <img src="img/zhangimg/xiangqing/12.gif" alt="" />
          <dd>2G流量日包</dd>
          <dt>500积分</dt>
        </dl>
        <dl>
          <img src="img/zhangimg/xiangqing/13.gif" alt="" />
          <dd>精品包装纸</dd>
          <dt>800积分</dt>
        </dl>
        <dl>
          <img src="img/zhangimg/xiangqing/14.gif" alt="" />
          <dd>北极渔夫</dd>
          <dt>760积分</dt>
        </dl>
        <dl>
          <img src="img/zhangimg/xiangqing/15.gif" alt="" />
          <dd>开心朵朵</dd>
          <dt>550积分</dt>
        </dl>
        <dl>
          <img src="img/zhangimg/xiangqing/16.gif" alt="" />
          <dd>蓝漂洗衣粉2袋</dd>
          <dt>650积分</dt>
        </dl>
        <dl>
          <img src="img/zhangimg/xiangqing/17.gif" alt="" />
          <dd>高德代驾券</dd>
          <dt>1积分</dt>
        </dl>
        <dl>
          <img src="img/zhangimg/xiangqing/19.gif" alt="" />
          <dd>开心朵朵</dd>
          <dt>800积分</dt>
        </dl>
        <dl>
          <img src="img/zhangimg/xiangqing/20.gif" alt="" />
          <dd>佳益3包抽纸</dd>
          <dt>610积分</dt>
        </dl>
      </div>
      <h2>——————商品介绍——————</h2>
      <div class="main">
        <p>一.订购规则：</p>
        <p>
          1. 权益超市黄金会员 （下文简称“黄金会员”）当前仅
          支持移动用户办理，其中非个人客户 （行业卡、物联网
          卡等）、欠费客户、余额不足的预付费客户、信用额度
          不足的后付费客户不能订购；
        </p>
        <p>2、订购成功即时生效，可享受相关会员权益；</p>
        <p>3、 黄金会员有效期至当月月底，不自动续订。</p>
        <p>二.会员福利：</p>
        <p>
          1 流量礼包：用户成为中国移动权益超市黄金会员，则
          可每月领取1GB通用流量日包一份，若当月未领取，则
          次月无法补领；当月流量礼包领取后，24小时内直充到
          ，届时会有短信提示，请注意查收；1GB通用流量为
          日包产品，到账后24小时内有效；
        </p>
        <p>
          2、会员优惠购：黄金会员用户可在 “会员优惠购” 专区
          以优惠价订购权益产品。黄金会员购买会员优惠购专区
          杈益后将会收到订购短信提醒，请实时关注；
        </p>
        <p>
          3、 会员福利社：黄金会员每月可在 “会员福利社” 领取
          福利优惠券，领取及使用规则以相应优惠券页面规则为 准；
        </p>
        <p>
          4. 精选5折购：黄金会员用户可在 “精选5折购” 专区
          半价订购权益产品，每月限购一款。黄金会员购买精选5
          折购专区权益后将会收到订购短信提醒，请实时关注。
        </p>
        <p>
          三.其他说明：广东移动客户如为2/3G不限量套餐客户
          不可办理，如需办理，需先主动取消以上套餐生效后方 可办理。
        </p>
      </div>
      <h2>——————参数规格——————</h2>
      <div class="main">
        <p>生效时间：成功订购后，立刻生效。</p>
        <p>
          使用说明：订购后至 “〝中国移动app-权益超市”享受会 员优惠购买等福利。
        </p>
        <p>有效期：一个月（自然月）。</p>
        <p>售后服务热线：无</p>
        <p>注意事项：权益超市黄金会员身份，可在权益超市内享 受优惠活动。</p>
        <p>兑换及转赠说明：无</p>
        <p>礼品概述：权益超市黄金会员身份，可在权益超市内享 受优惠活动。</p>
      </div>
      <h2>——————您可能还喜欢——————</h2>
      <div class="lie">
          <img src="img/zhangimg/xiangqing/21.gif" alt="">
          <img src="img/zhangimg/xiangqing/22.gif" alt="">
          <img src="img/zhangimg/xiangqing/23.gif" alt="">
          <img src="img/zhangimg/xiangqing/24.gif" alt="">
          <img src="img/zhangimg/xiangqing/25.gif" alt="">
          <img src="img/zhangimg/xiangqing/26.gif" alt="">
          <img src="img/zhangimg/xiangqing/27.gif" alt="">
          <img src="img/zhangimg/xiangqing/28.gif" alt="">
          <img src="img/zhangimg/xiangqing/29.gif" alt="">
          <img src="img/zhangimg/xiangqing/30.gif" alt="">
          <img src="img/zhangimg/xiangqing/31.gif" alt="">
      </div>
    </main>
    <footer>
        <img src="img/zhangimg/xiangqing/32.gif" alt="">
        <p>立即兑换</p>
    </footer>
  </div>
</template>

<script>
export default {
  methods: {
    fun() {
      this.$router.go(-1);
    },
  },
};
</script>

<style scoped>
.header {
  width: 3.6rem;
  height: 0.5rem;
  line-height: 0.5rem;
}
.header span:nth-child(1) {
  margin: 0.2rem 0.2rem 0 0.14rem;
  font-size: 0.25rem;
}
.header span:nth-child(2) {
  margin-right: 0.7rem;
  font-size: 0.25rem;
}
.header span:nth-child(3) {
  font-size: 0.18rem;
  font-weight: 900;
}
.banner {
  width: 100%;
  height: 3.2rem;
  margin-top: 0.1rem;
}
.banner img {
  width: 100%;
  height: 3.2rem;
}
main .neirong {
  width: 3.6rem;
  height: 0.84rem;
  margin-left: 0.14rem;
  border-bottom: 0.08rem solid #f0f0f0;
}
main .neirong b {
  font-size: 0.24rem;
  color: #e50170;
}
main .neirong p {
  font-size: 0.12rem;
  color: gray;
}
main .neirong span {
  color: #e50170;
  margin-left: 0.1rem;
}
main h1 {
  width: 3.6rem;
  height: 0.5rem;
  margin-left: 0.14rem;
  font-size: 0.16rem;
  line-height: 0.5rem;
}
main .yue {
  width: 3.6rem;
  height: 0.34rem;
  margin-left: 0.14rem;
  border-bottom: 0.02rem solid #f0f0f0;
}
main .pin {
  width: 3.6rem;
  height: 0.48rem;
  margin-left: 0.14rem;
  line-height: 0.48rem;
  border-bottom: 0.08rem solid #f0f0f0;
}
main .tishi {
  width: 3.6rem;
  height: 0.46rem;
  line-height: 0.46rem;
  margin-left: 0.14rem;
  border-bottom: 0.08rem solid #f0f0f0;
}
main .huan {
  width: 3.6rem;
  height: 1.08rem;
  border-bottom: 0.08rem solid #f0f0f0;
  margin-left: 0.14rem;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}
main .huan p {
  color: gray;
}
main .huan p span {
  color: black;
}
main .dongtu {
  width: 100%;
  height: 1.66rem;
  margin-left: 0.14rem;
  display: flex;
  align-items: center;
  flex: 1;
  overflow: auto;
}
main .dongtu dl {
  text-align: center;
  margin-right: 0.2rem;
}
main .dongtu dl img{
  width: .97rem;
  height: .97rem;
}
main h2 {
  width: 100%;
  height: 0.48rem;
  font-size: 0.12rem;
  text-align: center;
  line-height: 0.48rem;
  color: gray;
  background-color: #f0f0f0;
}
main .main {
  width: 3.6rem;
  margin-left: 0.14rem;
}
main .main p {
  font-size: 0.14rem;
  font-weight: 900;
}
main .lie{
    width: 3.6rem;
    margin-left: .14rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
main .lie img{
    width: 1.66rem;
    height: 2.7rem;
}
footer{
    width: 3.6rem;
    height: .6rem;
    margin-left: .14rem;
    display: flex;
    justify-content: space-between;
}
footer img{
    width: .18rem;
    height: .29rem;
    margin-top: .18rem;
}
footer p{
    width: 2.32rem;
    height: .34rem;
    background-color: #dd0067;
    text-align: center;
    line-height: .34rem;
    margin-top: .18rem;
    border-radius: .2rem;
}
</style>